<template>
  <div style="margin-top:20px">
    <el-form ref="form" label-width="80px" :model="form">
      <el-row>
        <el-col :span="8">
          <div class="grid-content bg-purple">
            <el-form-item label="账户余额" style="margin-right:15px">
              <el-input v-model="form.balance" :disabled="true"/>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="16" style="text-align: right;">
          <el-button @click="findList">查询</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <vxe-table
            ref="xTable"
            border
            show-footer
            highlight-hover-row
            row-id="id"
            :data="tableData"
            remote-sort
            @sort-change="sortList"
          >
            <vxe-table-column>
              <vxe-table-column field="branchName" title="所属机构" width="160" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.branchName" placeholder="请输入所属机构编码" clearable/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="accountAmount" title="账户余额" width="100" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.accountAmount" placeholder="请输入平台账户余额" clearable/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="paidAmount" title="变动金额" width="100" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.paidAmount" placeholder="请输入变动金额" clearable/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="paidLineType" title="支付方式" width="100" sortable>
                <template v-slot="{ row }">
                  {{paidLineType[row.paidLineType]}}
                </template>
              </vxe-table-column>
              <template v-slot:header="{ column }">
                <el-select v-model="listQuery.paidLineType" clearable placeholder="请选择">
                  <el-option
                    v-for="(v,k) in paidLineType"
                    :key="k"
                    :label="v"
                    :value="k"
                  />
                </el-select>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="paidItem" title="消费项目" width="100" sortable>
                <template v-slot="{ row }">
                  {{paidItem[row.paidItem]}}
                </template>
              </vxe-table-column>
              <template v-slot:header="{ column }">
                <el-select v-model="listQuery.paidItem" clearable placeholder="请选择">
                  <el-option
                    v-for="(v,k) in paidItem"
                    :key="k"
                    :label="v"
                    :value="k"
                  />
                </el-select>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="paidFeeType" title="消费类型" width="100" sortable>
                <template v-slot="{ row }">
                  {{paidFeeType[row.paidFeeType]}}
                </template>
              </vxe-table-column>
              <template v-slot:header="{ column }">
                <el-select v-model="listQuery.paidFeeType" clearable placeholder="请选择">
                  <el-option
                    v-for="(v,k) in paidFeeType"
                    :key="k"
                    :label="v"
                    :value="k"
                  />
                </el-select>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="createdByName" title="操作人" width="100" sortable/>
              <template v-slot:header="{ column }">
                <el-input v-model="listQuery.createdByName" placeholder="请输入操作人" clearable/>
              </template>
            </vxe-table-column>
            <vxe-table-column>
              <vxe-table-column field="gmtCreated" title="操作时间" min-width="400" sortable/>
              <template v-slot:header="{ column }">
                <el-date-picker
                  v-model="gmtCreatedRange"
                  type="daterange"
                  value-format="yyyy-MM-dd"
                  style="width:100%"
            range-separator="至"

                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="changeDate"
                />
              </template>
            </vxe-table-column>
          </vxe-table>
          <vxe-pager
            :loading="loading"
            :current-page.sync="listQuery.pageNum"
            :page-size.sync="listQuery.pageSize"
            :total="listQuery.total"
            :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
            @page-change="handlePageChange"
          />
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
  import Vue from 'vue'
  import 'xe-utils'
  import VXETable from 'vxe-table'
  import 'vxe-table/lib/index.css'
  import request from '@/utils/request'

  import XEUtils from 'xe-utils'
  import VXEUtils from 'vxe-utils'
  Vue.use(VXETable, VXEUtils, XEUtils, {mounts: ['cookie']})
  export default {
    name: 'partyGroupDetail',
    data() {
      return {
        gmtCreatedRange: [],
        paidLineType:{'0':'在线支付','1':'现金支付'},
        paidItem:{'0':'充值','1':'北斗','2':'短信','3':'软件'},
        paidFeeType:{'0':'收入','1':'支出'},
        message: '',
        loading: false,
        tableData: [],
        form: {
          balance: '',
        },
        listQuery: {
          code: '',
          userCode: '',
          orderCode: '',
          paidLineType: '',
          paidItem: '',
          paidFeeType: '',
          paidAmount: '',
          paidRemark: '',
          accountAmount: '',
          createByBranch: '',
          pageNum: 1,
          pageSize: 10,
          sortField: '',
          sortType: '',
          total: 0
        }
      }
    },
    methods: {
      getInfo(code,balance) {
        this.form.balance = balance;
        this.listQuery.createByBranch = code;
        this.findList();
      },
      findList() {
        this.loading = true
        request({
          url: '/arpa-basic-api/paidRecord',
          method: 'get',
          params: this.listQuery
        }).then(response => {
          this.tableData = response.data.records
          this.listQuery.total = response.data.total
          this.loading = false
        })
      },
      changeDate(value) {
        if (value) {
          this.listQuery.gmtCreatedStart = value[0] + " 00:00:00";
          this.listQuery.gmtCreatedEnd = value[1] + " 23:59:59";
        } else {
          this.listQuery.gmtCreatedStart = "";
          this.listQuery.gmtCreatedEnd = "";
        }
      },// 排序
      sortList({column, property, order}) {
        if (order) {
          this.listQuery.sortField = property
          this.listQuery.sortType = order
        } else {
          this.listQuery.sortField = ''
        }
        this.findList()
      },// 分页handle
      handlePageChange({currentPage, pageSize}) {
        this.listQuery.pageNum = currentPage
        this.listQuery.pageSize = pageSize
        this.findList()
      },
    }
  }
</script>
<style lang="scss" scoped>
  .dialog-footer {
    margin-top: 50px;
  }
</style>
